import { BasicDrawer, useDrawerInner } from "@/components/Drawer";
import { BasicForm, FormSchema, useForm } from "@/components/Form";
import { ProcessListenerApi } from "@/api/bpm/processListener";
import { message } from "antd";
import { useTranslation } from "react-i18next";
import { useState, useMemo } from "react";
let reload: Function;
let id: any;
const index = (props: { register: Fn }) => {
	const [isUpdated, setIsUpdated] = useState(false);
	const { t } = useTranslation();
	const en_vi = "bpm.manager.listener";
	const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(props.register, data => {
		reload = data.reload;
		id = data.record?.id;
		resetFields();
		setDrawerProps({ confirmLoading: true });
		setIsUpdated(!!data?.isUpdated);
		setFieldsValue({
			...data.record
		});
		setDrawerProps({ confirmLoading: false });
	});
	const formItems: FormSchema[] = [
		{
			label: t(`${en_vi}.name`),
			component: "Input",
			field: "name",
			rules: [
				{
					required: true,
					message: t("felix_ui.please_enter") + "  " + t(`${en_vi}.name`)
				}
			]
		},
		{
			label: t(`felix_ui.status`),
			component: "RadioGroup",
			field: "status",
			componentProps: {
				options: [
					{ label: t(`felix_ui.open`), value: 0 },
					{ label: t(`felix_ui.close`), value: 1 }
				]
			},
			rules: [
				{
					required: true,
					message: t("felix_ui.please_select") + "  " + t(`felix_ui.status`)
				}
			]
		},
		{
			label: t(`${en_vi}.type`),
			component: "Select",
			field: "type",
			rules: [
				{
					required: true,
					message: t("felix_ui.please_select") + "  " + t(`${en_vi}.type`)
				}
			],
			componentProps: {
				options: [
					{ label: t(`${en_vi}.execution`), value: "execution" },
					{ label: t(`${en_vi}.task`), value: "task" }
				],
				onChange: (value: String) => {
					if (value == "execution") {
						updateSchema([
							{
								field: "event",
								componentProps: {
									options: [t(`${en_vi}.start`), t(`${en_vi}.end`)].map((event: any) => {
										return {
											label: event,
											value: event
										};
									})
								}
							}
						]);
					} else {
						updateSchema([
							{
								field: "event",
								componentProps: {
									options: [
										t(`${en_vi}.create`),
										t(`${en_vi}.assignment`),
										t(`${en_vi}.complete`),
										t(`${en_vi}.delete`),
										t(`${en_vi}.update`),
										t(`${en_vi}.timeout`)
									].map((event: any) => {
										return {
											label: event,
											value: event
										};
									})
								}
							}
						]);
					}
				}
			}
		},
		{
			label: t(`${en_vi}.event`),
			component: "Select",
			field: "event",
			rules: [
				{
					required: true,
					message: t("felix_ui.please_select") + "  " + t(`${en_vi}.event`)
				}
			],
			componentProps: {
				options: [
					t(`${en_vi}.create`),
					t(`${en_vi}.assignment`),
					t(`${en_vi}.complete`),
					t(`${en_vi}.delete`),
					t(`${en_vi}.update`),
					t(`${en_vi}.timeout`)
				].map((event: any) => {
					return {
						label: event,
						value: event
					};
				})
			}
		},
		{
			label: t(`${en_vi}.valueType`),
			component: "Select",
			field: "valueType",
			rules: [
				{
					required: true,
					message: t("felix_ui.please_select") + "  " + t(`${en_vi}.valueType`)
				}
			],
			componentProps: {
				options: [
					{ label: t(`${en_vi}.class`), value: "class" },
					{ label: t(`${en_vi}.expression`), value: "expression" },
					{ label: t(`${en_vi}.delegateExpression`), value: "delegateExpression" }
				]
			}
		},
		{
			label: t(`${en_vi}.expression`),
			component: "Input",
			field: "value",
			rules: [
				{
					required: true,
					message: t("felix_ui.please_enter") + "  " + t(`${en_vi}.expression`)
				}
			]
		}
	];
	const getTitle = useMemo(() => {
		return isUpdated ? t(`system.menu.update`) : t(`system.menu.add`);
	}, [isUpdated]);
	const [registerForm, { validateFields, setFieldsValue, resetFields, updateSchema }] = useForm({
		schemas: formItems,
		labelWidth: 130,
		baseColProps: {
			span: 24
		}
	});
	const handleSubmit = async () => {
		const formValue = await validateFields();
		let res;
		if (isUpdated) {
			formValue.id = id;
			res = await ProcessListenerApi.updateProcessListener(formValue);
		} else {
			res = await ProcessListenerApi.createProcessListener(formValue);
		}
		if (!res) {
			message.error(t("viewComponents.patientInformation.additionFailed"));
			return;
		}
		message.success(t("viewComponents.patientInformation.successfullyAdded"));
		closeDrawer();
		reload();
	};
	return (
		<BasicDrawer title={getTitle} showFooter={true} {...props} register={registerDrawer} ok={handleSubmit}>
			<BasicForm register={registerForm} labelWrap={true}></BasicForm>
		</BasicDrawer>
	);
};
export default index;
